<template>
  <div>
    <el-dialog
      :title="status === '3' ? $t('message.cdtd') : $t('message.qxyd')"
      width="700px"
      :visible.sync="showClose"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-table
        ref="multipleTable"
        :data="siteList"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          key="siteId"
          type="selection"
          align="center"
          width="60"
        />
        <el-table-column
          align="center"
          :label="$t('message.cd')"
          prop="siteModelName"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          align="center"
          :label="$t('message.rq')"
          prop="day"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          align="center"
          :label="$t('message.time')"
          show-overflow-tooltip
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.beginTime + "-" + scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.oldprice')"
          show-overflow-tooltip
          prop="price"
          min-width="100"
        />
        <el-table-column
          align="center"
          :label="$t('message.zhj')"
          show-overflow-tooltip
          prop="memberPrice"
          min-width="100"
        >
          <template slot-scope="scope">
            {{
              scope.row.memberPrice ? scope.row.memberPrice : scope.row.price
            }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showClose = false">{{ $t("message.qx") }}</el-button>
        <el-button
          v-if="status != 3"
          :loading="loading"
          type="primary"
          @click="closeBtn"
        >{{ $t("message.qr") }}</el-button>
        <el-button
          v-else
          :loading="loading"
          type="primary"
          @click="closeBtns"
        >{{ $t("message.cdtd") }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('message.tdxq')"
      width="700px"
      :visible.sync="showTd"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-table
        ref="table"
        :data="siteIds"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          :label="$t('message.cd')"
          prop="siteModelName"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          align="center"
          :label="$t('message.rq')"
          prop="day"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          align="center"
          :label="$t('message.time')"
          show-overflow-tooltip
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.beginTime + "-" + scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.oldprice')"
          show-overflow-tooltip
          prop="price"
          min-width="100"
        />
        <el-table-column
          align="center"
          :label="$t('message.zhj')"
          show-overflow-tooltip
          prop="memberPrice"
          min-width="100"
        >
          <template slot-scope="scope">
            {{
              scope.row.memberPrice ? scope.row.memberPrice : scope.row.price
            }}
          </template>
        </el-table-column>
      </el-table>
      <div class="gjCnt">
        {{ $t("message.tkje") }}：
        <el-input
          v-if="modPrice"
          v-model="modPValue"
          maxlength="10"
          clearable
          oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
          :placeholder="$t('message.qsr')"
        />
        <el-input v-if="!modPrice" v-model="allPrice" disabled />
        {{ $t("message.yuan") }}
        <el-checkbox
          v-if="canMod"
          v-model="modPrice"
          style="margin-left: 10px"
        >{{ $t("message.gaijia") }}</el-checkbox>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTd = false">{{ $t("message.qx") }}</el-button>
        <el-button :loading="loading" type="primary" @click="closeBtn">{{
          $t("message.qr")
        }}</el-button>
      </div>
    </el-dialog>
    <RefundTem v-if="print" ref="RefundTemRef" />
  </div>
</template>
<script>
import {
  partCancelPrice, partCancel, printOrder, configList
} from '@/api'
import store from '@/store'
import RefundTem from '@/components/printTem/refund.vue'
export default {
  components: {
    RefundTem
  },
  data() {
    return {
      print: false,
      modalDialog: store.getters.dialog,
      showClose: false, // 弹窗
      siteList: [],
      siteIds: [],
      loading: false,
      showTd: false,
      orderId: '',
      canMod: false,
      modPrice: false,
      modPValue: '',
      allPrice: '',
      status: ''
    }
  },
  created() {
    this.getDefalutConfig()
  },
  methods: {
    handleSelectionChange(val) {
      this.siteIds = val
    },
    cancelBtn(e, siteIds) {
      this.showClose = true
      this.orderId = e.orderId
      this.siteIds = siteIds || []
      this.status = e.status
      this.siteList = e.siteList
      this.$nextTick(() => {
        if (siteIds && siteIds.length > 0) {
          e.siteList.forEach(row => {
            siteIds.forEach(selected => {
              if (selected.siteId === row.siteId) {
                this.$refs.multipleTable.toggleRowSelection(row, true)
              }
            })
          })
        }
      })
    },
    getDefalutConfig() {
      configList({ param: { type: '6' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const valueListb = res.recordList
          const obj = valueListb.find(item => item.code === 'EDIT_PRICE_CONFIG')
          if (obj && obj.name) {
            this.canMod = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    closeBtn() {
      const that = this
      if (this.modPrice) {
        if (!this.modPValue && this.modPValue !== '0' && this.modPValue !== 0) {
          return this.$message.error(this.$t('message.qsr') + this.$t('message.tkje'))
        }
      }
      let siteIds = [...this.siteIds]
      siteIds = siteIds.map((item) => { return item.siteId })
      let refundMoney = ''
      let str = this.$t('message.qrqxydtc')
      if (this.status === '3' && this.modPrice && this.modPValue) {
        refundMoney = this.modPValue
      }
      if (this.status === '3') {
        str = this.$t('message.cdtdtc')
      }
      if (this.siteIds && this.siteIds.length > 0) {
        this.$confirm(str, this.$t('message.ts'), {
          confirmButtonText: this.$t('message.qd'),
          cancelButtonText: this.$t('message.qx'),
          type: 'warning',
          callback: () => { },
          beforeClose: (action, ctx, close) => {
            if (action !== 'confirm') {
              close()
              return
            }
            ctx.confirmButtonLoading = true
            partCancel({ param: { orderId: that.orderId, siteIds, refundMoney }}).then((res) => {
              ctx.confirmButtonLoading = false
              close()
              if (res.errorCode === '000000') {
                if (this.status === '3') {
                  that.$message.success(this.$t('message.qxydcg'))
                } else {
                  that.$message.success(this.$t('message.cdtdcg'))
                }
                that.showClose = false
                that.showTd = false
                if (res.record) {
                  that.printOrder(that.orderId, res.record)
                }
                that.$emit('closeSccess')
              }
            })
              .catch(() => { ctx.confirmButtonLoading = false })
          }
        }).finally(() => { })
      } else {
        this.$message.info(this.$t('message.qxzcc'))
      }
    },
    printOrder(id, refundOrderId) {
      const venueId = sessionStorage.getItem('venueId')
      let that = this
      printOrder({
        param: {
          venueId,
          templateCode: refundOrderId ? 'SITE_REFUND_TPML' : 'SITETPML',
          workId: id,
          refundOrderId
        }
      })
        .then(res => {
          if (res.errorCode === '000000') {
            if (res.record && res.record.isPrint === '1' && res.record.dataList && res.record.dataList.length > 0) {
              res.record.dataList.forEach(item => {
                this.print = true
                this.$nextTick(() => {
                  that.$refs.RefundTemRef.obj = { ...item, header: that.$t('message.tkd') }
                  setTimeout(() => {
                    that.$refs.RefundTemRef.print()
                  }, 300)
                  setTimeout(() => {
                    that.print = false
                  }, 500)
                })
              })
            } else {
              this.print = false
            }
          } else {
            this.print = false
          }
        }).catch(() => {
          this.print = false
        })
    },
    closeBtns() {
      const that = this
      if (this.siteIds && this.siteIds.length > 0) {
        let siteIds = [...this.siteIds]
        siteIds = siteIds.map((item) => { return item.siteId })
        partCancelPrice({ param: { orderId: that.orderId, siteIds }})
          .then(res => {
            if (res.errorCode === '000000') {
              that.showClose = false
              that.modPrice = false
              that.modPValue = ''
              that.allPrice = res.record.memberPrice
              that.showTd = true
              that.$emit('closeSccess')
            }
          })
      } else {
        this.$message.info(this.$t('message.qxzcc'))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.gjCnt {
  font-size: 14px;
  margin-top: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 14px;

  .el-input {
    width: 100px;
    margin: 0 5px;
  }
}
</style>
